<!--
 * @Date         : 2023-11-06 21:37:46
 * @LastEditTime : 2023-11-21 22:25:13
 * @description  : searchPage
-->
<template>
  <view class="searchPage">
    <scroll-view
      class="scrollview"
      :scroll-y="true"
      @scrolltolower="scrolltolower"
      @scroll="onscroll"
    >
      <cl-header
        title="搜索"
        :isOccupy="false"
        :scrollTop="scrollTop"
        :transparent="true"
        :isBack="true"
      ></cl-header>
      <div class="main">
        <div class="main-search">
          <u-search
            placeholder="走进艺术宫"
            :showAction="false"
            v-model.trim="searchValue"
            @change="courseList"
          ></u-search>
        </div>
        <div class="list">
          <!-- 分类 -->
          <div v-if="list.length > 0">
            <!-- 列表 -->
            <div
              class="list-item"
              v-for="item in list"
              :key="item.id"
              @click="onDetail(item.id)"
            >
              <div class="left-image">
                <image :src="item.cover" mode="aspectFill" />
              </div>
              <div class="right">
                <div class="title">{{ item.name || "" }}</div>
                <div class="desc">
                  <!-- {{ item.content || "" }} -->
                  <u--text
                    :lines="6"
                    color="#666666"
                    size="24rpx"
                    :text="item.content"
                  ></u--text>
                </div>
              </div>
            </div>
          </div>
          <u-empty v-else mode="order" iconSize="120" text="数据为空">
          </u-empty>
        </div>
      </div>
    </scroll-view>
  </view>
</template>

<script>
import { getStorage } from "utils/auth";
import { course_list } from "apis/modules/user";
export default {
  name: "searchPage",
  data() {
    return {
      scrollTop: 0,
      searchValue: "",
      page: 1,
      pageSize: 10,
      cate_id: "",
      list: [],
    };
  },

  onLaunch() {},
  onShow() {},
  onHide() {},
  methods: {
    scrolltolower() {
      if (this.isMore) {
        return false;
      }
      this.page++;
      this.courseList();
    },
    onDetail(course_id) {
      let token = !!getStorage("token");
      if (token) {
        this.$Router.push({
          path: `/pagesA/onlineDetail/onlineDetail?course_id=${course_id}`,
        });
      } else {
        this.show = true;
      }
    },
    courseList() {
      let data = {
        create_sort: "asc",
        play_sort: "asc",
        page: this.page,
        limit: this.pageSize,
        name: this.searchValue,
        school_id: getStorage("school_id"),
        cate_id: getStorage("cate_id") || this.cate_id,
      };
      if (!this.searchValue) {
        this.list = [];
        return;
      }
      course_list(data).then((result) => {
        if (data.page == 1) {
          this.list = result;
        } else {
          this.list = this.list.concat(result);
        }
        this.isMore = result.length <= 0;
      });
    },
    onscroll(data) {
      this.scrollTop = data.detail.scrollTop;
    },
  },
};
</script>

<style lang="scss" scoped>
.searchPage {
  background: #fff;
  height: 100vh;
  .scrollview {
    height: 100%;
    overflow: hidden;
  }
  .main {
    padding-top: 164rpx;
    background: #fff;
    &-search {
      width: 80%;
      margin: 0 auto;
    }
  }
  .list {
    background: #fff;
    margin: 30rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    .type {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20rpx;
      &-item {
        margin-right: 70rpx;
        font-size: 24rpx;
        color: #666666;
        font-weight: bold;
        padding: 0 10rpx;
      }
    }
    .list-item {
      overflow: hidden;
      border-radius: 18rpx;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
      display: flex;
      margin-bottom: 30rpx;
      .left-image {
        width: 300rpx;
        flex-shrink: 0;
        height: 350rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        padding: 30rpx;
        .title {
          height: 42rpx;
          font-size: 30rpx;
          font-weight: 800;
        }
        .desc {
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #666666;
          font-weight: 500;
          height: 227rpx;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
